<template>
  <div id="memberCenter">
    <div class="approve">
      <!-- 个人、企业认证选择 -->
      <ul class="approve_option">
        <li
          v-for="(item, index) in approveOption"
          :key="index"
          :class="currentIndex == index ? 'bgColor' : ''"
          @click="currentIndex = index"
        >{{ item }}</li>
      </ul>
      <!-- 个人认证输入框 -->
      <div class="personageInput" v-show="currentIndex == 0">
        <ul class="personageInfo" v-show="personageInfo">
          <li>
            <span>真实姓名：</span>
            <el-input v-model="userName" placeholder="请输入真实姓名" class="info"></el-input>
          </li>
          <li>
            <span>身份证号：</span>
            <el-input
              v-model="identityCard"
              placeholder="请输入身份证号"
              class="info"
              oninput="value=value.replace(/[^\d]/g,'')"
              maxlength="18"
            ></el-input>
          </li>
        </ul>
        <!-- 个人认证已认证 -->
        <div class="userInfo" v-show="userInfo">
          <p>真实姓名：{{ userName }}</p>
          <p>身份证号：{{ identityCard }}</p>
          <p style="color:#f03a58">已认证</p>
        </div>
        <!-- 提交按钮 -->
        <div class="submitBtn" v-show="personageSubmit">
          <el-button
            type="danger"
            size="medium"
            style="width:100px;"
            @click="
              userInfo = true;
              personageInfo = false;
              personageSubmit = false;
            "
          >提交</el-button>
        </div>
      </div>
      <!-- 企业认证输入框 -->
      <div class="enterpriseInput" v-show="currentIndex == 1">
        <ul class="personageInfo" v-if="enterpriseInfo">
          <li>
            <span>企业全称：</span>
            <el-input v-model="enterpriseName" placeholder="请输入企业全称" class="info"></el-input>
          </li>
          <li>
            <span>联系人姓名：</span>
            <el-input v-model="contactName" placeholder="请输入联系人姓名" class="info"></el-input>
          </li>
          <li>
            <span>联系方式：</span>
            <el-input
              v-model="contactPhone"
              placeholder="请输入联系方式"
              class="info"
              oninput="value=value.replace(/[^\d]/g,'')"
              maxlength="11"
            ></el-input>
          </li>
          <li>
            <span>营业执照注册号码：</span>
            <el-input
              v-model="businessLicenseNum"
              placeholder="请输入营业执照注册号码"
              class="info"
              oninput="value=value.replace(/[^\d]/g,'')"
              maxlength="15"
            ></el-input>
          </li>
          <li style="display:flex;justify-content: flex-start;">
            <span>营业执照照片：</span>
            <div style="margin-left:-16px;margin-top:10px">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                limit="1"
                :on-exceed="overstep"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </li>
        </ul>
        <!-- 企业认证已认证 -->
        <div class="enterpriseCertified" v-if="enterptiseApprove">
          <p>企业全称：{{ enterpriseName }}</p>
          <p>联系人姓名：{{ contactName }}</p>
          <p>联系人方式：{{ contactPhone }}</p>
          <p>营业执照注册号码：{{ businessLicenseNum }}</p>
          <p>营业执照照片：{{ dialogImageUrl }}</p>
        </div>
        <!-- 提交按钮 -->
        <div class="submitBtn" v-if="enterpriseSubmit">
          <el-button
            type="danger"
            size="medium"
            style="width:100px;margin-left:400px;margin-top:80px"
            @click="
              enterpriseInfo = false;
              enterptiseApprove = true;
              enterpriseSubmit = false;
            "
          >提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="">
import Vue from "vue";
export default Vue.extend({
  name: "memberCenter",
  data() {
    return {
      approveOption: ["个人认证", "企业认证"], //个人、企业认证选项
      currentIndex: 0, //个人、企业认证当前选项
      userName: "", //个人用户认证
      identityCard: "", //身份证号码
      personageInfo: true, //个人认证信息输入
      userInfo: false, //个人认证已认证
      personageSubmit: true, //个人认证提交显示
      enterpriseName: "", //企业名称
      contactName: "", //企业联系人姓名
      contactPhone: "", //企业联系方式
      businessLicenseNum: "", //营业执照注册号码
      dialogImageUrl: "", //上传的图片
      dialogVisible: false, //放大后的图片
      enterpriseInfo: true, //企业信息输入框显示
      enterptiseApprove: false, //企业已认证显示
      enterpriseSubmit: true // 企业认证提交显示
    };
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    overstep() {
      alert("仅支持一张图片");
    }
  }
});
</script>
<style lang="scss" scoped>
// 个人、企业认证
@mixin attestation {
  width: 520px;
  margin-top: 20px;
  .personageInfo {
    list-style: none;
    text-align: start;
    font-size: 14px;
    li {
      display: flex;
      justify-content: space-between;
      span {
        width: 160px;
      }
      .info {
        width: 365px;
      }
    }
  }
}
.approve {
  min-height: 680px;
  // padding-bottom: 20px;
  background: white;
  padding: 0 30px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 60px;
  margin-top: -16px;
  // 个人、企业认证选择
  .approve_option {
    height: 60px;
    border-bottom: 1px solid #ccc;
    display: flex;
    list-style: none;
    li {
      width: 100px;
      margin: 0 45px;
      cursor: pointer;
      // border: 1px solid red;
      display: flex;
      justify-content: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      // color: rgba(240, 58, 88, 1);
    }
    .bgColor {
      width: 100px;
      color: #f03a58;
      border-bottom: 2px solid #f03a58;
    }
  }
  // 个人认证输入框
  .personageInput {
    @include attestation();
    // 个人认证已认证
    .userInfo {
      text-align: start;
      line-height: 35px;
      font-size: 16px;
    }
    // 提交按钮
    .submitBtn {
      margin-top: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 280px;
    }
  }
  // 企业认证输入框
  .enterpriseInput {
    @include attestation();
    .enterpriseCertified {
      text-align: start;
      line-height: 35px;
      font-size: 16px;
    }
  }
}
// 修改el-button的样式
::v-deep .el-button--danger {
  width: 260px;
  height: 40px;
  background: rgba(240, 58, 88, 1);
  border-radius: 5px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
